<!--设备信息查询-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>设备信息查询</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>设备信息查询</legend>
</fieldset>
<!--面板-->
<div class="layui-card">
    <div class="layui-card-body">
        <label class="layui-form-label">设备编号</label>
        <div class="layui-input-inline">
            <input type="text" id="deviceId" class="layui-input">
        </div>
        <button onclick="search();" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
    </div>
</div>

<div style="padding: 20px;">
    <!--面板-->
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">设备信息</div>
            <div class="layui-card-body" id="devices"></div>
        </div>
    </div>
    <!--面板-->
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">维修记录</div>
            <div class="layui-card-body">
                <!--时间线-->
                <ul class="layui-timeline" id="repair"></ul>
            </div>
        </div>
    </div>
</div>

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
    //搜索
   function search(){
       //设备编号
       var deviceId=$("#deviceId").val();
       $.ajax({
           url:"/devices/" + deviceId,
           type:"GET",
           dataType:"JSON",
           success:function (devices){
               if(devices == null || devices == undefined || devices == ""){
                   layer.msg("设备不存在");
                   return;
               }
               //处理设备信息
               $("#devices").append("设备编号:"+ devices["deviceId"]+"<br/>")
                   .append("设备名称:"+ devices["deviceName"]+"<br/>")
                   .append("设备状态:"+ devices["deviceStatus"]+"<br/>")
                   .append("设备位置:"+ devices["position"]+"<br/>")
                   .append("设备用途:"+ devices["purpose"]);
               //获取维修记录
               let repair =devices['repair'];
               for(let i = repair.length-1; i>=0; i--){
                   $("#repair").append('<li class="layui-timeline-item">' +
                       '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>'+
                       '<div class="layui-timeline-content layui-text">'+
                       '<h3 class="layui-timeline-title">' +
                       repair[i].operationTime + '</h3>'+
                       '操作名称：'+ repair[i].operation +
                       '<p>损坏程度：'+repair[i].damageDegree+'&nbsp;'+
                       '操作员：'+repair[i].operator+'&nbsp;'+
                       '操作员电话：'+repair[i].phoneNum+'</p></div></li>');
               }
           },
       });
   }
</script>
</body>
</html>